{extend name="iframe" /}

{block name="body"}
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
			<form action="{:request()->url()}" method="post" class="xn_ajax" data-type="open">
				<div class="layui-form-item">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="required" placeholder="请输入名称" autocomplete="off"
							class="layui-input" value="{$data.title}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off"
							class="layui-input" value="{$data.phone}" min="11">
					</div>
				</div>
				<!-- <div class="layui-form-item">
					<label class="layui-form-label">授权码</label>
					<div class="layui-input-block">
						<input type="text" name="code" lay-verify="" placeholder="请输入授权码" autocomplete="off"
							class="layui-input" value="{$data.code}">
					</div>
				</div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">经纬度</label>
					<div class="layui-input-block">
						<input type="text" name="longitude" lay-verify="" id="longitude" placeholder=""
							autocomplete="off" class="layui-input" value="{$data.longitude}">
					</div> 
					<div class="layui-input-block">
						<input type="text" name="latitude" lay-verify=""  id="latitude"placeholder="" autocomplete="off"
							class="layui-input" value="{$data.latitude}">
							<button type="button" class="layui-btn layui-btn-sm" id="open-map" style="margin-top: 10px;">
								<i class="fas fa-map-marked-alt"></i> 选择地理位置
							</button>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text" name="address" lay-verify="" placeholder="请输入地址" autocomplete="off"
							class="layui-input" value="{$data.address}" id="address">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="radio" name="status" value="1" title="启用" {if condition="$data['status'] eq '1'"
							}checked{/if}>
						<input type="radio" name="status" value="2" title="禁用" {if condition="$data['status'] eq '2'"
							}checked{/if}>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" lay-submit class="layui-btn">保存</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div id="map-dialog" style="display:none;width:100%;height:100%;">
	<div class="layui-inline" style="margin-top:10px;">
	    <label class="layui-form-label">名称</label>
	    <div class="layui-input-inline">
			 <input type="text" id="place-search" class="form-control layui-input" placeholder="输入地点进行搜索...">
	        <!-- <input type="text" name="title" placeholder="请输入关键字" value="{:input('title')}" autocomplete="off" class="layui-input" > -->
	    </div>
	</div>
    <div id="map-container" style="width:100%;height:100%;min-height:500px;margin-top:10px;"></div>
</div>
{/block}

{block name="js"}
<!--编辑器-->
<script src="/static/admin/ueditor/ueditor.config.js"></script>
<script src="/static/admin/ueditor/ueditor.all.min.js"></script>
<script src="/static/admin/ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
	window._AMapSecurityConfig = {
		securityJsCode: "9268bc355b0151a2d69486b44ea2851a",
	};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c9cb6aa6213c5c68b0404da28709de8d"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>

<script>
$(function() {
    let map = null;
    let marker = null;
    let placeSearch = null;

    // 初始化地图弹窗
    $('#open-map').click(function() {
        layer.open({
            type: 1,
            title: '选择地理位置 - 可拖动地图或搜索地点',
            content: $('#map-dialog'),
            area: ['90%', '80%'],
            success: function() {
                initAMap();
            }
        });
    });

    // 初始化高德地图
    function initAMap() {
        if (!map) {
            // 创建地图实例
            map = new AMap.Map('map-container', {
                zoom: 13,
                center: [116.397428, 39.90923]
            });

            // 初始化搜索服务
            AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
                placeSearch = new PoiPicker({
                    input: 'place-search',
                    placeSearchOptions: {
                        map: map,
                        pageSize: 10
                    }
                });

                // 监听地点选择
                placeSearch.on('poiPicked', function(poiResult) {
                    const position = poiResult.item.location;
                    updatePosition(position);
                    map.setZoom(16);
                    map.setCenter(position);
                });
            });

            // 地图点击事件
            map.on('click', function(e) {
                updatePosition(e.lnglat);
            });

            // 地图拖拽事件
            map.on('dragend', function() {
                if (marker) {
                    updatePosition(marker.getPosition());
                }
            });
        }
    }

    // 更新坐标位置
    function updatePosition(lnglat) {
        const lng = lnglat.getLng();
        const lat = lnglat.getLat();

        // 更新标记
        if (marker) {
            marker.setPosition([lng, lat]);
        } else {
            marker = new AMap.Marker({
                position: [lng, lat],
                map: map
            });
        }

        // 填充表单
        $('#longitude').val(lng.toFixed(6));
        $('#latitude').val(lat.toFixed(6));

        // 反查地址信息
        reverseGeocode(lng, lat);
    }

    // 地址反查
    function reverseGeocode(lng, lat) {
        AMap.plugin('AMap.Geocoder', function() {
            new AMap.Geocoder().getAddress([lng, lat], function(status, result) {
                if (status === 'complete') {
					$('#address').val(result.regeocode.formattedAddress);
                    // layer.msg('当前位置：' + result.regeocode.formattedAddress, {time: 2000});
					layer.msg('选取成功');
					return false;
                }
            });
        });
    }
});
</script>
{/block}